<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <img
          style="width: 90%; height: 50px; margin-left: 8px; margin-top: 5px"
          src="../assets/fysclogo.jpg"
          alt="Logo"
        />
        <el-row>
          <el-col>
            <el-menu
              @select="handleSelect"
              style=""
              :default-active="$route.path"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <el-menu-item index="/user"
                ><i class="el-icon-user-solid"></i>用户管理</el-menu-item
              >
              <el-menu-item index="/order"
                ><i class="el-icon-s-goods"></i>订单管理</el-menu-item
              >
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-reading"></i>
                  <span>书籍管理</span>
                </template>
                <el-menu-item-group style="text-align: justify">
                  <el-menu-item index="/book"
                    ><i class="el-icon-tickets"></i>基本信息管理</el-menu-item
                  >
                  <el-menu-item index="/bookClasses"
                    ><i class="el-icon-menu"></i>书籍分类管理</el-menu-item
                  >
                  <el-menu-item index="/bookImg"
                    ><i class="el-icon-picture"></i>图片管理</el-menu-item
                  >
                  <br />
                </el-menu-item-group>
              </el-submenu>

              <el-menu-item index="/class"
                ><i class="el-icon-s-grid"></i>分类管理</el-menu-item
              >
              <el-menu-item index="/post"
                ><i class="el-icon-position"></i>帖子管理</el-menu-item
              >
              <el-menu-item index="/apply"
                ><i class="el-icon-s-comment"></i>回复管理</el-menu-item
              >
              <el-menu-item index="/notice"
                ><i class="el-icon-question"></i>公告管理</el-menu-item
              >
              <el-menu-item index="/statistics"
                ><i class="el-icon-s-data"></i>数据统计</el-menu-item
              >
              <el-menu-item index="/carousel"
                ><i class="el-icon-picture-outline"></i>轮播图管理</el-menu-item
              >
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="8" :offset="6">
              <h1 style="color: white; font-size: 30px; line-height: 1px">
                欢迎来到后台管理界面
              </h1>
            </el-col>
            <el-col :span="2" :offset="8">
              <!-- 头像框开始 -->
              <el-dropdown @command="handleCommand">
                <div class="el-dropdown-link">
                  <el-avatar :src="headImg" :size="50"></el-avatar>
                  <i class="el-icon-arrow-down el-icon--right icon-arrow"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- 头像框结束 -->
            </el-col>
          </el-row>
        </el-header>
        <el-main style="height: 90vh">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import {logout} from '../api/usrMG'
export default {
  name: "HomePage",
  data() {
    return {
      activeIndex: "/user",
      headImg: localStorage.getItem("headAdmin"), //记得换成headAdmin
    };
  },
  methods: {
    handleCommand(command) {
      //这里处理的是头像框旁边的那个东西，退出登录
      console.log(command)
      logout(localStorage.getItem("userIdAdmin"))
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.msg);
            localStorage.removeItem("userIdAdmin");
            localStorage.removeItem("headAdmin");
            location.href = "/login";
          } else {
            this.$message.error(res.data.code + "::" + res.data.msg);
          }
        })
        .catch((err) => {
          alert(err);
        });
    },
    handleSelect(key, keyPath) {
      console.log(keyPath);
      this.$router.push(key).catch((err) => {
        console.log(err);
      });
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.el-header {
  //   height: 40px;
  background-color: #545c64;
  padding: 0 !important;
  border-left: 1px solid white;
  height: 10vh !important;
}

.el-aside {
  background-color: #545c64;
  padding: 0px !important;
  height: 100vh;
  // 隐藏滚动条
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  ::-webkit-scrollbar {
    /* Chrome, Safari, and Opera */
    display: none;
  }
}

.el-main {
  background-color: #e9eef3;
  overflow: auto;
  scrollbar-width: none; /* 隐藏滚动条在Chrome、Firefox等现代浏览器中 */
  -ms-overflow-style: none; /* 隐藏滚动条在IE和Edge浏览器中 */
}

.el-dropdown-link {
  /* 设置头像框那个位置的样式 */
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
</style>